<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期与组件生命周期</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 :class="className">类名绑定</h1>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"helloVue",
                className:"redBg"
            },
            beforeCreate(){
                console.log("beforeCreate");
                // 此时数据data和事件方法methods还未绑定到app对象上
            },
            created(){
                console.log("created");
                // 数据data和方法methods已经绑定到应用对象app上
                console.log(this);
                console.log(this.msg);
                console.log(this.clickEvent);
            },
            beforeMount(){
                console.log("beforeMount");
                let dom = document.querySelector('.redBg');
                console.log(dom);
                // 渲染之前，根据数据生成的DOM对象是获取不到的
            },
            mounted(){
                console.log("mounted");
                let dom = document.querySelector('.redBg');
                console.log(dom);
                // 渲染之后，可以获取数据生成的DOM对象
            },
            methods:{
                clickEvent:function(){

                }
            },
            beforeUpdate(){
                console.log("beforeUpdate");
                // 数据更改，但页面内容未更改
            },
            updated(){
                // 内容已更改
                console.log("updated");
            },
            beforeDestroy(){
                // 应用销毁之前
                console.log("beforeDestroy");
            },
            destoryed(){
                // 应用销毁之后
                console.log("destroyed");
            }
        });

        
    </script>
</body>
</html>